﻿@page "/dialogs"

<h3>Dialog 对话框组件</h3>

<h4>通过注入服务调用 <code>Show</code> 方法弹出窗口进行人机交互</h4>

<Tips class="mt-3">
    <p>
        本组件使用注入服务的形式提供功能，使用时用户体验效果非常舒适，随时随地的调用，需要在使用本组件的页面中内置 <code>Dialog</code> 组件，或者在 <code>MainLayout</code> 主布局组件中内置，示例代码如下：
    </p>
</Tips>

<Pre>&lt;Dialog /&gt;</Pre>

<Block Title="基本用法" Introduction="通过设置 <code>DialogOption</code> 属性对模态框进行基本属性设置">
    <Button @onclick="@OnClick">点击打开 Dialog</Button>
</Block>

<Block Title="弹出复杂组件" Introduction="通过调用 <code>Show&lt;Counter&gt;()</code> 来弹出一个自定义组件">
    <p>
        本例中弹出对话框中包含一个示例网站的自带 <code>Counter</code> 组件
    </p>
    <Button @onclick="@OnClickCounter">点击打开 Dialog</Button>
</Block>

<Block Title="弹窗传参" Introduction="通过设置 <code>BodyContext</code> 属性值，可以把参数传递给弹窗中的组件内">
    <p>
        本例中点击按钮时设置 <code>BodyContext</code> 值为 <code>我是传参</code>，弹窗内容为自定义组件 <code>DemoComponent</code>，组件内通过级联参数获取到其值
    </p>
    <Button @onclick="@OnClickParameter">Dialog 传参示例</Button>
</Block>

<Block Title="实战应用" Introduction="本例中通过传递一个主键，在弹窗内的组件通过此主键进行数据查询，并将结果显示在弹窗内">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <Select @bind-Value="@DataPrimaryId" DisplayText="主键参数" ShowLabel="true">
                    <Options>
                        <SelectOption Text="1" Value="1"></SelectOption>
                        <SelectOption Text="2" Value="2"></SelectOption>
                        <SelectOption Text="3" Value="3"></SelectOption>
                        <SelectOption Text="4" Value="4"></SelectOption>
                        <SelectOption Text="5" Value="5"></SelectOption>
                        <SelectOption Text="6" Value="6"></SelectOption>
                        <SelectOption Text="7" Value="7"></SelectOption>
                        <SelectOption Text="8" Value="8"></SelectOption>
                        <SelectOption Text="9" Value="9"></SelectOption>
                        <SelectOption Text="10" Value="10"></SelectOption>
                    </Options>
                </Select>
            </div>
            <div class="form-group col-12 col-sm-6">
                <Button @onclick="@OnClickShowDataById">弹窗</Button>
            </div>
        </div>
    </div>
</Block>

<Block Title="代码关闭弹窗" Introduction="本例讲解如何通过代码打开与关闭弹窗">
    <p>利用弹窗参数 <code>DialogOption</code> 实例，弹窗弹出后实例中的 <code>Dialog</code> 属性值即为当前弹窗句柄，通过调用其 <code>Toggle/Close</code> 方法即可关闭弹窗</p>

    <Button @onclick="@Show">Dialog</Button>
</Block>

<Block Title="多级弹窗" Introduction="点击弹窗内部按钮继续弹出对话窗">
    <p>功能介绍</p>
    <ul class="ul-demo">
        <li>点击按钮弹出对话窗</li>
        <li>切换弹窗内 <code>Tab</code> 组件的第三个标签页 <b>角色管理</b></li>
        <li>点击标签页中的弹窗继续弹出对话框</li>
        <li>关闭当前对话框后之前打开的对话框 <b>保持状态</b></li>
    </ul>

    <Button OnClick="@ShowDialogLoop">弹窗</Button>
</Block>

<Block Title="模态对话框" Introduction="通过 <code>ShowModal</code> 方法弹出线程阻塞模式的对话框">
    <p>功能介绍</p>
    <ul class="ul-demo">
        <li>点击按钮弹出模态弹窗</li>
        <li>更改模态弹窗内数值点击 <code>确认</code> 按钮时数值 <b>更新</b></li>
        <li>更改模态弹窗内数值点击 <code>取消</code> 或者 <code>关闭</code> 按钮时数值 <b>不更新</b></li>
        <li>再次点击弹出模态弹窗时，数值保持一致</li>
    </ul>
    <Button @onclick="@OnResultDialogClick">点击打开 Dialog</Button>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="实战演练" Introduction="模拟一个邮件应用，弹窗选择收件人后填入下方的收件人框。">
    <p>功能介绍</p>
    <ul class="ul-demo">
        <li>点击按钮弹出模态弹窗</li>
        <li>通过级联传参 <code>BodyContext</code> 传递 <b>10</b> 到弹窗中初始化数据</li>
        <li>选中 <code>Table</code> 组件中的行数据，通过双向绑定对 <code>SelectedRows</code> 数据进行 <b>更新</b></li>
        <li>点击 <b>选中</b> 按钮通过双向绑定对 <code>Emails</code> 数据进行 <b>更新</b></li>
        <li>点击 <code>取消</code> 或者 <code>关闭</code> 按钮时 <code>Emails</code> 值 <b>不更新</b></li>
        <li>再次点击弹出模态弹窗时，组件内行选中状态保持一致</li>
        <li>弹窗中未选择用户时禁止关闭弹窗</li>
    </ul>
    <div class="form-inline">
        <label class="control-label">收件人：</label>
        <div class="input-group flex-fill">
            <BootstrapInput placeholder="请输入 ..." Value="@InputValue"></BootstrapInput>
            <div class="input-group-append">
                <Button Icon="fa fa-vcard-o" OnClick="@OnEmailButtonClick"></Button>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" Title="DialogOption 属性" />
